<template>
  <div class="user-details">
    <headeres/>
    <div class="menu">
      <ul>
        <li
          v-for="item in assetsList"
          :class="{active:isHover === item.name}"
          @click="choice(item.path, item.name)"
          :key="item.name"
        >
          <i :class="item.icon"></i>
          <span>{{item.name}}</span>
        </li>
      </ul>
      <section class="content-container">
        <div class="content-wrapper">
          <router-view />
        </div>
      </section>
    </div>
    <footeres class="user-footer"></footeres>
  </div>
</template>
<script>
import headeres from "@/components/header";
import footeres from "@/components/footer";
import { mapActions } from "vuex";
export default {
  data() {
    return {
      isHover: "WALLET",
      assetsList: [
        {
          path: "/wallet",
          name: "WALLET",
          icon: "el-icon-wallet"
        },
        {
          path: "/account",
          name: "ACCOUNT SECURITY",
          icon: "el-icon-user"
        },
        {
          path: "/kyc",
          name: "KYC VERIFICATION",
          icon: "el-icon-setting"
        },
        {
          path: "/system",
          name: "SYSTEM SETTING",
          icon: "el-icon-setting"
        },
        {
          path: "",
          name: "DOWNLOAD",
          icon: "el-icon-download"
        },
        {
          path: "",
          name: "ABOUT",
          icon: "el-icon-mobile"
        }
      ]
    };
  },
  components: {
    headeres,
    footeres
  },

  watch: {
    $route(to, from) {
      this.isHover = this.$route.meta.title;
    }
  },
  mounted() {
    this.orLogin(true);
  },
  methods: {
    ...mapActions(["orLogin"]),
    choice: function(path, name) {
      this.isHover = name;
      this.$router.push({
        path: path
      });
    }
  }
};
</script>
<style lang="less" scoped>
.user-details {
  width: 100%;
  height: auto;
  padding-top: 110px;
  background: #f7f7fa;
  .menu {
    width: 1210px;
    margin: 0px auto;
    margin-bottom: 40px;
    display: flex;
    height: auto;
    overflow: hidden;
    ul {
      flex: 0 0 237px;
      width: 237px;
      height: auto;
      color: #000000;
      text-align: left;
      font-size: 16px;
      background: #ffffff;
      li {
        width: 100%;
        padding: 22px 15px;
        cursor: pointer;
        height: 62px;
        background: #ffffff;
        i {
          font-size: 25px;
          margin-right: 5px;
          overflow: hidden;
          display: inline-block;
        }
        span {
          overflow: hidden;
          display: inline-block;
        }
        &:hover {
          color: #f7cf4a;
        }
      }
      .active {
        color: #f7cf4a;
      }
    }
    .content-container {
      flex: 1;
      margin-left: 20px;
      .content-wrapper {
        box-sizing: border-box;
        width: 100%;
      }
    }
  }
  .user-footer {
    background: #ffaf46;
  }
}
</style>